<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个页面</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="public-header">
        <div class="public-container clearfloat">
            <div class="header-logo"><a href=""></a></div>
            <ul class="header-nav">
                <li class="item"><a href="">Our Story</a></li>
                <li class="item"><a href="">Menu</a></li>
                <li class="item"><a href="">Reservations</a></li>
                <li class="item"><a href="">news</a></li>
                <li class="item"><a href="">Rviews</a></li>
            </ul>
        </div>
    </div>
    <div class="index-banner">
      <div class="index-banner-bg">
        <img src="images/demo-1.jpg" alt="banner" />
      </div>
      <div class="index-banner-text">
        <div class="text-logo"></div>
        <p class="text-info">
          <i class="line line-l"></i>
          <span class="text">resto restaurant home page website template</span>
          <i class="line line-r"></i>
        </p>
      </div>
    </div>
    <div class="index-menu">
      <div class="menu-tips">
        The Menu
      </div>
      <div class="public-container menu-list">
          <ul class="clearfloat">
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
              <li class="clearfloat menu-item">
                  <a class="title">
                      <h4>Voluptate cillum fugiat.</h4>
                      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                  </a>
                  <div class="line"></div>
                  <div class="price">$50</div>
              </li>
          </ul>
      </div>
      <a href="#" class="menu-more-btn">load more <span>|</span><span class="icon"></span></a>
    </div>
    <div class="public-container  index-panel">
        <div class="index-panel-header clearfloat">
          <h3>Featueed Dishes</h3>
          <div class="line"></div>
          <div class="btn-group">
            <a href="#" class="btn active"></a>
            <a href="#" class="btn"></a>
            <a href="#" class="btn"></a>
            <a href="#" class="btn"></a>
          </div>
        </div>
        <div class="index-panel-body index-food-list">
            <ul class="clearfloat">
                <li class="food-item">
                    <a href="">
                        <img  class="banner"  src="images/demo-2.jpg">
                        <div class="name">Fugiat nulla sint <span class="price">$30</span></div>
                        <div class="star-bar">
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star nostar"></span>
                        </div>
                    </a>
                </li>
                <li class="food-item">
                    <a href="">
                        <img  class="banner"  src="images/demo-3.jpg">
                        <div class="name">Fugiat nulla sint <span class="price">$30</span></div>
                        <div class="star-bar">
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                        </div>
                    </a>
                </li>
                <li class="food-item">
                    <a href="">
                        <img  class="banner"  src="images/demo-4.jpg">
                        <div class="name">Fugiat nulla sint <span class="price">$30</span></div>
                        <div class="star-bar">
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star nostar"></span>
                        </div>
                    </a>
                </li>
                <li class="food-item">
                    <a href="">
                        <img  class="banner"  src="images/demo-5.jpg">
                        <div class="name">Fugiat nulla sint <span class="price">$30</span></div>
                        <div class="star-bar">
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star"></span>
                            <span class="star nostar"></span>
                            <span class="star nostar"></span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="public-container index-panel">
        <div class="index-panel-header clearfloat">
          <h3>The Gallery</h3>
          <div class="line"></div>
        </div>
        <div class="index-panel-body index-pics">
          <a class="pic-col pic-col-m"><img src="images/demo-6.jpg" alt="" /></a>
          <div class="pic-col pic-col-s">
            <a class="pic-row"><img src="images/demo-7.jpg" alt="" /></a>
            <a class="pic-row"><img src="images/demo-8.jpg" alt="" /></a>
          </div>
          <a class="pic-col pic-col-l"><img src="images/demo-9.jpg" alt="" /></a>
        </div>
    </div>
    <div class=" public-footer">
        <div class="public-container">
          <div class="footer-col">
            <p>
              New York Restaurant <br>
              3926 Anmoore Road <br>
              New York, NY 10014 <br>
              <a class="footer-tel" href="tel:718-749-1714 ">718-749-1714 </a>
            </p>
          </div>
          <div class="footer-col">
            <p>
              France Resturant <br>
              68, rue de la Couronne <br>
              75002 PARIS <br>
              02.94.23.69.56
            </p>
          </div>
          <div class="footer-col">
            <a href="#">Blog</a>
            <a href="#">Careers</a>
            <a href="#">Privacy Policy</a>
            <a>Conyact</a>
          </div>
          <div class="footer-col">
            <div class="footer-logo"></div>
            <div class="footer-info">
              © All Rights Reserved 2014 <br>
              Find More at Pixelhint.com
             </div>
          </div>
        </div>
    </div>
</body>
</html>
